<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>闲时-发布服务</title>
    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="../../css/need/serviceRelease.css" type="text/css">
    <link href="../../plugins/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
</head>
<body>
    <div class="xs-rel-ser">
        <div class="xs-rel-ser-clearfix">
            <div class="rel-content-l">
                <!-- 选择发布服务的分类 - begin -->
                <div class="content-one">
                    <h2>
                        1、请选择
                        <i class="rel-ser-text" id="serTypeTexy" style="color: black">软件开发/测试</i>
                        下的分类
                    </h2>
                    <div class="dropdown" style="margin-left: 30px;">
                        <button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
                            data-toggle="dropdown">APP开发
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" href="#">Java</a>
                            </li>
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
                            </li>
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
                            </li>
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- 选择发布服务的分类 - end -->
                <!-- 填写服务标题和联系方式 - begin -->
                <div class="content-two">
                    <h2>2、填写服务标题和联系方式</h2>
                    <div class="content-two-clearfix">
                        <!-- 上传封面 - begin -->
                        <div class="content-two-l">
                            <label>
                                <div style="text-align: center">
                                    <input class="upload-cover" type="file" height="160px" ; width="160px" name="file"
                                        multiple="multiple" accept="image/jpg,image/jpeg,image/png">
                                    <span class="upload-tips plus-sign">+</span><br>
                                    <span class="upload-tips">服务封面<br>（建议400*400像素）</span>
                                </div>
                            </label>
                        </div>
                        <!-- 上传封面 - end -->
                        <!-- 说明 - 地点 - 联系方式 - begin -->
                        <div class="content-two-r">
                            <div class="content-two-list">
                                <h4><i>*</i>简单说明你提供的服务是什么</h4>
                                <div class="ser-title">
                                    <input type="text" style=" border-radius: 5px;" id="serTitle" name="serTitle"
                                        placeholder="请简单说明您的服务内容" onfocus="this.placeholder=''"
                                        onblur="this.placeholder='请简单说明您的服务内容'">
                                </div>
                            </div>
                            <div class="content-two-list">
                                <h4><i>*</i>我的地点</h4>
                                <div>
                                    <form class="form-inline">
                                        <div data-toggle="distpicker">
                                            <div class="form-group">
                                                <label class="sr-only" for="province1">Province</label>
                                                <select class="form-control" id="province1"></select>
                                            </div>
                                            <div class="form-group">
                                                <label class="sr-only" for="city1">City</label>
                                                <select class="form-control" id="city1"></select>
                                            </div>
                                            <div class="form-group">
                                                <label class="sr-only" for="district1">District</label>
                                                <select class="form-control" id="district1"></select>
                                            </div>
                                        </div>
                                    </form>

                                </div>
                            </div>
                            <div class="content-two-list">
                                <h4>手机号码</h4>
                                <div>
                                    <input type="text" id="cellPhone" name="cellPhone" value="">
                                </div>
                            </div>
                            <div class="content-two-list">
                                <h4>QQ号码</h4>
                                <div>
                                    <input type="text" id="qqCode" name="qqCode" value="">
                                </div>
                            </div>
                        </div>
                        <!-- 说明 - 地点 - 联系方式 - end -->
                    </div>
                </div>
                <!-- 填写服务标题和联系方式 - end -->
                <!-- 上传自我简介和具体服务内容描述 - begin -->
                <div class="content-three">
                    <h2>3、上传自我简介和具体服务内容描述</h2>
                    <div class="l-common-box">
                        <div class="ser-introduce">
                            <h4><i>*</i>服务介绍</h4>
                            <div>
                                <label class="upload-pic">
                                    <div style="text-align: center;margin-top: 10px; ">
                                        <span class="upload-tips plus-sign">+</span><br>
                                        <span class="upload-tips">上传图片（建议上传小于5M，宽度875px的jpg格式图片）</span>
                                        <input class="upload-cover" type="file" height="100px" ; width="100%"
                                            name="file" multiple="multiple" accept="image/jpg,image/jpeg,image/png">
                                    </div>
                                </label>
                            </div>

                            <div style="height: 200px">
                                <textarea type="textarea" class="ser-introduce-tip" id="serDesc" name="serDesc" required
                                    placeholder="请在1000字以内描述清楚您的服务内容
如：服务优势、服务流程、服务更多说明" onfocus="this.placeholder=''"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 上传自我简介和具体服务内容描述 - end -->
                <!-- 设置收费模式和价格 - begin -->
                <div class="content-four">
                    <h2>4、设置收费模式和价格</h2>
                    <div class="content-four-box">
                        <div class="charge-type">
                            <span>按时间收费</span>
                        </div>
                        <div>
                            <p class="charge-tip">按照工作时间收费，可以设置可被预约的具体时间，预约开始时间前不接单，订单自动关闭</p>
                        </div>
                        <div class="bgc-f5">
                            <div class="ser-cost-box">
                                <span class="ser-cost">服务费用：</span>
                                <input type="text" class="price">
                                <span class="price-unit">元</span>
                                <select class="ser-cost-type">
                                    <option value="hour">/小时</option>
                                    <option value="day">/天</option>
                                    <option value="month">/月</option>
                                </select>
                            </div>
                            <div>
                                <span class="time-of-appointment">可约时间：</span>
                                <input type="text" class="time-area">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 设置收费模式和价格 - end -->
            </div>
            <div class="rel-ser-r">
                <div class="ser-note">
                    <h2>服务注意事项:</h2>
                    <ul>
                        <li>1、根据国家广告法新规，标题请不要使用不实虚假夸大的描述，如：国家级、最好、全网最低、第一、独家等限制级词语。</li>
                        <li>2、服务的封面图片和详情中请不要使用存在侵权的字体和图片，如有侵权行为，平台将下架该服务。</li>
                        <li>3、双方达成协议后，服务商在完成时间后7天内不提交验收，默认放弃服务，托管金额将全额返还给需求者。</li>
                        <li>4、交易全程零佣金，但依法纳税是每个公民的义务，平台将从每笔订单收入中扣除相应的综合服务税费，以帮个体开票给到需求方。</li>
                    </ul>
                    <!-- 客服 - begin -->
                    <div class="division">
                        <span class="customer-ser">发布有疑问？客服来帮忙！</span>
                    </div>
                    <a href="#" class="qq-a">QQ在线联系</a>
                    <span class="ser-timearea">周一至周五9:00~18:00</span>
                    <span class="customer-ser-tel">400-180-8321</span>
                    <span class="ser-timearea">周一至周日9:00~21:00</span>
                     <!-- 客服 - end -->
                </div>
               
                <!-- 发布 - begin -->
                <div class="release">
                    <h2 style="padding-bottom: 25px;">发布</h2>
                    <a href="javascript:void(0)" class="ser-btn">
                        <button type="button" class="btn-save save" id="save">保存草稿</button>
                    </a>
                    <a href="javascript:void(0)" class="ser-btn">
                        <button type="button" class="btn-release commit" id="commit">确认发布</button>
                    </a>
                </div>
                <!-- 发布 - end -->
            </div>
        </div>
    </div>

    <!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
    <script src="../../plugins/jquery/jquery.min.js"></script>
    <!--引入bootstrap的js文件-->
    <script src="../../plugins/bootstrap/js/bootstrap.js"></script>
    <script src="../../js/need/serviceRelease.js"></script>

    <script src="../../plugins/js/plugins/sweetalert/sweetalert.min.js"></script>

    <script src="../../plugins/bootstrap-date/js/distpicker.data.js"></script>
    <script src="../../plugins/bootstrap-date/js/distpicker.js"></script>
    <script src="../../plugins/bootstrap-date/js/main.js"></script>

</body>

</html>